<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            text-align: center;
            margin: 100px auto 0;
            height: 40px;
        }
        div button{
            width: 80px;
            height: 100%;
        }
        div .active{
            background-color:green;
        }
        main {
            margin: auto;
            border: 2px solid gainsboro;
            width: 300px;
            height: 500px;
        }
        main>p{
            font-size: 20px;
            margin-bottom: 10px;
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        main a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="top">
        <button>视频</button>
        <button>直播</button>
    </div>
    <main></main>
</body>
</html>
<script>
    let route =[
        {path:'/video',render:video_page},
        {path:'/live',render:live_page},
    ]
    let btns = [...document.querySelectorAll('button')]
    console.log(btns);
    btns.forEach((item,index)=>{
        item.onclick = function(e){
            e.preventDefault()
            history.pushState({},'',route[index].path)
            btns[index].classList.remove('active')
           for(let i=0;i<btns.length;i++){
            btns[i].classList.remove('active')

           }
            btns[index].classList.add('active')
            route[index].render()
        }
    })

    function video_page(){
        let str= ` 
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        <p><a href="#">视频测试文字视频测试文字视频测试文字视频测试文字视频测试文字</a></p>
        `
        document.querySelector('main').innerHTML=str
    }
    function live_page(){
        let str2 =`
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
        <p><a href="#">直播测试文字直播测试文字直播测试文字直播测试文字直播测试文字</a></p>
       `
        document.querySelector('main').innerHTML= str2
    }
</script>